 <template>
 <view class="container">
     <!-- 选择入园日期 -->
  <view class="date-section">
    <view class="section-title">选择入园日期</view>
    <view class="calendar">
       <view class="month">{{ currentYear }}.{{ currentMonth }}</view>
      <view class="date-grid">
         <view v-for="(item, index) in dateList" :key="index"
             :class="['date-item', { 'selected': selectedDate === item.date, 'disabled': item.status === '已约满', 'rest': item.status === '闲时' && selectedDate !== item.date, 'rest-selected': item.status === '闲时' && selectedDate === item.date }]"
               @click="selectDate(item)">
           <view class="week">{{ item.week }}</view>
           <view class="day">{{ item.day }}</view>
          <view class="status">{{ item.status }}</view>
        </view>
      </view>
    </view>
  </view>

      <!-- 选择入园时段 -->
      <view class="time-section">
        <view class="section-title">选择入园时段</view>
        <view class="time-grid">
          <view v-for="(slot, index) in timeSlots" :key="index"
                :class="['time-item', { 'selected': selectedTime === slot.time, 'disabled': slot.status === '已约满' }]"
                @click="selectTime(slot)">
            {{ slot.time }} <text class="status-text">{{ slot.status }}</text>
          </view>
        </view>
      </view>

      <!-- 确认按钮 -->
      <view class="footer">
        <button class="confirm-button" @click="confirmSelection">时段确认</button>
      </view>
    </view>
  </template>

 <script>
 export default {
  data()  {
     return {
        currentYear: new Date().getFullYear(), // 当前年份
       currentMonth: new Date().getMonth() + 1, // 当前月份
       selectedDate: '', // 已选择的日期
       selectedTime: '', // 已选择的时段
      dateList: [], // 动态生成的日期列表
       timeSlots: [
         { time: '09:00-11:00', status: '已约满' },
         { time: '11:00-13:30', status: '已约满' },
         { time: '13:30-16:00', status: '余4' }
      ]
     };
   },
  mounted() {
     this.generateDateList(); // 组件挂载时生成日期列表
   },
  methods:  {
    // 生成未来两周日期的函数
    generateDateList() {
      const today = new Date(); // 当前时间
      const currentTime = today.getHours(); // 当前小时
      const maxDate = new Date(today); // 设置一个最大日期
      maxDate.setDate(today.getDate() + 14); // 从今天起加14天

      for (let i = 0; i < 14; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() + i); // 每次循环递增一天

        const formattedDate = date.toISOString().split('T')[0]; // 格式化日期为 YYYY-MM-DD

        // 判断日期状态
        let status = '闲时'; // 默认状态为闲时

        // 如果是今天且当前时间大于 16:00，设为“已约满”
        if (i === 0 && currentTime >= 16) {
          status = '已约满';
        } else if (date < today) {
          // 如果是过去的日期，设为“已约满”
          status = '已约满';
        }

        this.dateList.push({
          day: String(date.getDate()).padStart(2, '0'), // 获取当前日期，补齐两位数
          week: this.getWeekday(date),
          status: status,
          date: formattedDate
        });
      }
     },

    // 获取星期几
    getWeekday(date) {
      const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      return weekdays[date.getDay()];
    },

    // 选择日期
      selectDate(item) {
        if (item.status !== '已约满') {
          this.selectedDate = item.date; // 选择日期
        }
      },
  
      // 选择时段
      selectTime(slot) {
        if (slot.status !== '已约满') {
          this.selectedTime = slot.time; // 选择时段
        }
      },

      // 确认选择
      confirmSelection() {
        if (!this.selectedDate || !this.selectedTime) {
          uni.showToast({
            title: '请选择日期和时段',
            icon: 'none'
          });
          return;
        }
        uni.showToast({
          title: '预约成功',
          icon: 'success'
        });
        uni.navigateTo({
          url: `/pages/yuyue/personal-yuyue?selectedDate=${this.selectedDate}&selectedTime=${this.selectedTime}`,
        });
      }
    }
  };
  </script>

  <style scoped>
  /* 全局容器 */
  .container {
    padding: 0;
    background-color: #f5f5f5;
    height: 100%;
  }

  /* 顶部导航栏样式 */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .nav-bar {
    display: flex;
    align-items: center;
  }

  .nav-title {
    font-size: 18px;
    margin-left: 10px;
    color: #333;
  }

  /* 日期选择部分 */
  .date-section, .time-section {
    margin-top: 20px;
    padding: 10px;
    background-color: white;
    border-radius: 8px;
  }

  .section-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
  }

  .calendar, .time-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .date-grid {
    display: flex;
    flex-wrap: wrap;
  }

  .date-item {
    width: 9%; /* 一行7个 */
    text-align: center;
    padding: 8px; /* 缩小内边距 */
    border-radius: 8px;
    margin-bottom: 8px; /* 减少下方的间距 */
    background-color: #fff;
    cursor: pointer;
    border: 1px solid transparent;
  }

  /* 初始状态为白色，选中后为浅绿色 */
  .date-item.rest {
    background-color: #fff; /* 闲时状态下的白色背景 */
    color: #333;
  }

  .date-item.rest-selected {
    background-color: #d4edda; /* 选中的浅绿色 */
    color: white;
  }

  .date-item.selected {
    background-color: #8DCB6D;
    color: white;
    border: 1px solid #8DCB6D;
  }

  .date-item.disabled {
    background-color: #e0e0e0;
    color: #999;
  }

  .week {
    font-size: 12px;
    color: #666;
  }

  .day {
    font-size: 14px; /* 调整字体大小 */
    font-weight: bold;
    color: #333;
  }

  .status {
    font-size: 10px; /* 缩小状态文字的字体 */
    color: #b0b0b0;
  }

  /* 时段选择部分 */
  .time-item {
    width: 100%;
    text-align: center;
    padding: 8px; /* 缩小内边距 */
    margin-bottom: 8px; /* 减少间距 */
    border-radius: 8px;
    background-color: #f5f5f5;
    cursor: pointer;
    font-size: 14px; /* 缩小字体 */
  }

  .time-item.selected {
    background-color: #8DCB6D;
    color: white;
  }

  .time-item.disabled {
    background-color: #e0e0e0;
    color: #999;
  }

  .status-text {
    font-size: 12px; /* 缩小状态文字的字体 */
    color: #666;
  }

  /* 底部按钮 */
  .footer {
    margin-top: 20px;
    padding: 10px;
    text-align: center;
  }

  .confirm-button {
    width: 100%;
    padding: 12px; /* 缩小按钮的内边距 */
    border-radius: 30px;
    background-color: #8DCB6D;
    color: white;
    font-size: 16px;
    font-weight: bold;
  }
  </style>
